<!-- 弹窗提示组件 -->
<template>
  <div id="">
    <div class="comfirmDiv">
    	<div class="comfirmText">
    		<p class="comfirmTit">{{comfirmTitle.comfirmTop}}</p>
      	<p class="comfirmCon">{{comfirmTitle.comfirmCon}}</p>
    	</div>

      <div class="comfirmBtn">
        <button type="button" class="cancelBtn" @click="cancle">{{comfirmTitle.comfirmBtn[0]}}</button>
        <button type="button" class="sureBtn" @click="sure">{{comfirmTitle.comfirmBtn[1]}}</button>
      </div>
    </div>
    <span class="comfirmShadow"></span>
  </div>
</template>
<script>
export default {
  name: "comfirm",
  props: ['comfirmTitle'],
  data: () => ({

  }),
  methods: {
    cancle () {
      //取消按钮
      var that = this;
      // console.log('取消');
      that.$emit('comfirmEvent',{isTrue:false,isWrong:false});
    },
    sure () {
      //确认按钮
      var that = this;
      // console.log('确认');
      that.$emit('comfirmEvent',{isTrue:true,isWrong:false});
    }
  }
}
</script>
<style lang="scss" scoped>

.comfirmDiv{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99;
  background: white;
  transform: translate(-50%,-50%);
  width: 70%;
  border-radius: 6px;
  overflow: hidden;
}
.comfirmText{
	padding: 2rem 0;
}
.comfirmTit{
  margin-bottom: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.comfirmCon{
	text-align: center;
}
.comfirmBtn{
  @include flex;
  button{
    @include flexcell;
    color: #aacc03;
    border: 1px solid #e5e5e5;
    background: none;
    height: 40px;
    &.cancelBtn{

    }
    &.sureBtn{

    }
  }
}
.comfirmShadow{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0; right: 0;
  z-index: 2;
  background: rgba(0,0,0,0.5);
}
</style>
